<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CU MR BULL API 文档</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 0;
            text-align: center;
            margin-bottom: 40px;
            border-radius: 10px;
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .nav {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .nav ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        .nav a {
            color: #667eea;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        
        .nav a:hover {
            background-color: #f0f0f0;
        }
        
        .section {
            background: white;
            padding: 30px;
            margin-bottom: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .section h2 {
            color: #667eea;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }
        
        .endpoint {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .endpoint-header {
            background: #f8f9fa;
            padding: 15px 20px;
            border-bottom: 1px solid #e9ecef;
        }
        
        .method {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 0.8rem;
            margin-right: 10px;
        }
        
        .method.get { background: #d4edda; color: #155724; }
        .method.post { background: #d1ecf1; color: #0c5460; }
        .method.put { background: #fff3cd; color: #856404; }
        .method.delete { background: #f8d7da; color: #721c24; }
        
        .endpoint-path {
            font-family: 'Courier New', monospace;
            font-weight: bold;
        }
        
        .endpoint-body {
            padding: 20px;
        }
        
        .endpoint-description {
            margin-bottom: 15px;
            color: #666;
        }
        
        .params, .response {
            margin-bottom: 15px;
        }
        
        .params h4, .response h4 {
            margin-bottom: 10px;
            color: #495057;
        }
        
        .code {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            overflow-x: auto;
        }
        
        .status-badge {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        
        .status-success { background: #d4edda; color: #155724; }
        .status-info { background: #d1ecf1; color: #0c5460; }
        .status-warning { background: #fff3cd; color: #856404; }
        
        @media (max-width: 768px) {
            .nav ul {
                flex-direction: column;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .container {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🐂 CU MR BULL API</h1>
            <p>韩式料理餐厅 API 接口文档</p>
        </div>
        
        <div class="nav">
            <ul>
                <li><a href="#overview">概览</a></li>
                <li><a href="#auth">用户认证</a></li>
                <li><a href="#users">用户管理</a></li>
                <li><a href="#menu">菜单管理</a></li>
                <li><a href="#orders">订单管理</a></li>
                <li><a href="#coupons">优惠券</a></li>
                <li><a href="#admin">管理后台</a></li>
            </ul>
        </div>
        
        <div id="overview" class="section">
            <h2>📋 API 概览</h2>
            <p><strong>基础URL:</strong> <code>http://localhost:3000/api</code></p>
            <p><strong>认证方式:</strong> JWT Bearer Token</p>
            <p><strong>数据格式:</strong> JSON</p>
            <p><strong>字符编码:</strong> UTF-8</p>
            
            <h3>通用响应格式</h3>
            <div class="code">
{
  "success": true,
  "message": "操作成功",
  "data": { ... },
  "pagination": {
    "page": 1,
    "limit": 10,
    "total": 100,
    "totalPages": 10
  }
}
            </div>
            
            <h3>状态说明</h3>
            <p><span class="status-badge status-success">运行中</span> 服务器正常运行</p>
            <p><span class="status-badge status-info">开发中</span> 功能正在开发</p>
            <p><span class="status-badge status-warning">测试中</span> 功能需要测试</p>
        </div>
        
        <div id="auth" class="section">
            <h2>🔐 用户认证</h2>
            
            <div class="endpoint">
                <div class="endpoint-header">
                    <span class="method post">POST</span>
                    <span class="endpoint-path">/auth/register</span>
                </div>
                <div class="endpoint-body">
                    <div class="endpoint-description">用户注册</div>
                    <div class="params">
                        <h4>请求参数:</h4>
                        <div class="code">
{
  "username": "用户名",
  "email": "邮箱地址",
  "password": "密码",
  "phone": "手机号码",
  "full_name": "真实姓名"
}
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="endpoint">
                <div class="endpoint-header">
                    <span class="method post">POST</span>
                    <span class="endpoint-path">/auth/login</span>
                </div>
                <div class="endpoint-body">
                    <div class="endpoint-description">用户登录</div>
                    <div class="params">
                        <h4>请求参数:</h4>
                        <div class="code">
{
  "username": "用户名或邮箱",
  "password": "密码"
}
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="endpoint">
                <div class="endpoint-header">
                    <span class="method post">POST</span>
                    <span class="endpoint-path">/auth/logout</span>
                </div>
                <div class="endpoint-body">
                    <div class="endpoint-description">用户登出</div>
                    <p>需要 Authorization 头部</p>
                </div>
            </div>
        </div>
        
        <div id="menu" class="section">
            <h2>🍽️ 菜单管理</h2>
            
            <div class="endpoint">
                <div class="endpoint-header">
                    <span class="method get">GET</span>
                    <span class="endpoint-path">/menu/categories</span>
                </div>
                <div class="endpoint-body">
                    <div class="endpoint-description">获取菜单分类列表</div>
                    <p>公开接口，无需认证</p>
                </div>
            </div>
            
            <div class="endpoint">
                <div class="endpoint-header">
                    <span class="method get">GET</span>
                    <span class="endpoint-path">/menu/items</span>
                </div>
                <div class="endpoint-body">
                    <div class="endpoint-description">获取菜品列表</div>
                    <div class="params">
                        <h4>查询参数:</h4>
                        <div class="code">
?category_id=1&available=true&page=1&limit=10
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="endpoint">
                <div class="endpoint-header">
                    <span class="method get">GET</span>
                    <span class="endpoint-path">/menu/full</span>
                </div>
                <div class="endpoint-body">
                    <div class="endpoint-description">获取完整菜单（分类+菜品）</div>
                </div>
            </div>
        </div>
        
        <div id="orders" class="section">
            <h2>📦 订单管理</h2>
            
            <div class="endpoint">
                <div class="endpoint-header">
                    <span class="method post">POST</span>
                    <span class="endpoint-path">/orders</span>
                </div>
                <div class="endpoint-body">
                    <div class="endpoint-description">创建订单</div>
                    <div class="params">
                        <h4>请求参数:</h4>
                        <div class="code">
{
  "order_type": "dine_in|takeaway|delivery",
  "table_number": 1,
  "delivery_address": "配送地址",
  "payment_method": "cash|card|alipay|wechat",
  "items": [
    {
      "menu_item_id": 1,
      "quantity": 2,
      "notes": "备注"
    }
  ],
  "coupon_code": "优惠券代码"
}
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="endpoint">
                <div class="endpoint-header">
                    <span class="method get">GET</span>
                    <span class="endpoint-path">/orders/my-orders</span>
                </div>
                <div class="endpoint-body">
                    <div class="endpoint-description">获取我的订单列表</div>
                    <p>需要用户认证</p>
                </div>
            </div>
        </div>
        
        <div id="coupons" class="section">
            <h2>🎫 优惠券管理</h2>
            
            <div class="endpoint">
                <div class="endpoint-header">
                    <span class="method get">GET</span>
                    <span class="endpoint-path">/coupons/available</span>
                </div>
                <div class="endpoint-body">
                    <div class="endpoint-description">获取可用优惠券</div>
                    <p>需要用户认证</p>
                </div>
            </div>
            
            <div class="endpoint">
                <div class="endpoint-header">
                    <span class="method post">POST</span>
                    <span class="endpoint-path">/coupons/validate</span>
                </div>
                <div class="endpoint-body">
                    <div class="endpoint-description">验证优惠券</div>
                    <div class="params">
                        <h4>请求参数:</h4>
                        <div class="code">
{
  "code": "优惠券代码",
  "order_amount": 100.00
}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="admin" class="section">
            <h2>⚙️ 管理后台</h2>
            
            <div class="endpoint">
                <div class="endpoint-header">
                    <span class="method get">GET</span>
                    <span class="endpoint-path">/admin/dashboard/stats</span>
                </div>
                <div class="endpoint-body">
                    <div class="endpoint-description">获取仪表板统计数据</div>
                    <p>需要管理员权限</p>
                </div>
            </div>
            
            <div class="endpoint">
                <div class="endpoint-header">
                    <span class="method get">GET</span>
                    <span class="endpoint-path">/admin/users</span>
                </div>
                <div class="endpoint-body">
                    <div class="endpoint-description">获取用户列表</div>
                    <p>需要管理员权限</p>
                </div>
            </div>
            
            <div class="endpoint">
                <div class="endpoint-header">
                    <span class="method get">GET</span>
                    <span class="endpoint-path">/admin/orders</span>
                </div>
                <div class="endpoint-body">
                    <div class="endpoint-description">获取所有订单</div>
                    <p>需要管理员权限</p>
                </div>
            </div>
        </div>
        
        <div class="section">
            <h2>📞 联系信息</h2>
            <p><strong>开发团队:</strong> CU MR BULL 技术团队</p>
            <p><strong>API 版本:</strong> v1.0.0</p>
            <p><strong>最后更新:</strong> 2025年8月13日</p>
            <p><strong>服务状态:</strong> <span class="status-badge status-success">正常运行</span></p>
        </div>
    </div>
</body>
</html>